<template>
	<view class="detail-page">
		<view class="detail-navBar">
			<heardCard @goUpLevel="goBack"></heardCard>
		</view>
		<view class="detail-top">
			<view class="detail-title">{{ detailTitle }}</view>
			<view style="width: 200rpx">
				<uni-tag :text="requestType" type="success" size="small" v-if="requestType=='营销类'"></uni-tag>
				<uni-tag :text="requestType" type="primary" size="small" v-if="requestType=='设计类'"></uni-tag>
				<!-- <uni-tag :text="requestType" type="success" size="small"></uni-tag> -->
			</view>

			<view class="detail-adress">需求地点：{{ detailAdress }} </view>
			<view class="detail-number">
				联系电话：<text style="color: #5590f6">{{ detailNumber }}</text>
			</view>
		</view>
		<view class="requirement-details">
			<view class="requirement-title">需求详情</view>
			<view class="requirement-text">
				{{ requirementText }}
			</view>
			<view class="requirement-image">
				<img v-for="(item, index) in imageList" :key="index" :src="item" alt=""
					style="width: 100%; height: 100%; padding-right: 20rpx" />
			</view>
		</view>
		<view class="requirement-details-bottom">
			<view class="requirement-title">发布人信息</view>
			<view></view>
			<enterpriceItem :title="enterpriceName" :list="describeList" :time="establishTime" bgColor="#F4F5FA"
				:imageUrl="imageUrl" @getEnterpriceID="getEnterpriceID">
			</enterpriceItem>
		</view>
		<view class="jiebang">
			<uniGoodsNav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="getComment"
				@buttonClick="buttonClick"></uniGoodsNav>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		toRaw,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import enterpriceItem from "./componts/enterprice-item.vue"
	import uniGoodsNav from "@/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue"
	import heardCard from "./componts/heard-card.vue"
	import {
		getXhBGroupByList,
		saveHxbUserOperation,
		getXhbPublishRequestDetailById
	} from "@/api/mutual-assistance";
	const enterpriceName = ref("")
	const establishTime = ref("")
	const imageList = ref([])
	const {
		proxy
	} = getCurrentInstance()
	const arr = ref()
	const detailTitle = ref("")
	const detailAdress = ref("")
	const detailNumber = ref("");
	const requirementText = ref("")
	const options = ref([{
			icon: 'personadd',
			text: '关注'
		}, {
			icon: 'chat',
			text: '评论',
			infoBackgroundColor: '#007aff',

		},
		// {
		// 	icon: 'paperplane',
		// 	text: '分享',

		// },
	]);
	const buttonGroup = ref([{
			text: '我来揭榜',
			backgroundColor: '#FC6E6A',
			color: '#fff'
		}

	])
	const describeList = ref([])
	const timeBrfore = ref("成立于")
	const enterpriceIdNumber = ref(null)
	const imageUrl = ref("")
	const requestType = ref("")

	function getComment(data) {

		let arr = toRaw(data.content)
		console.log(arr)
		if (arr.text == '评论') {
			uni.navigateTo({
				url: `/package_mutual_assistance/pages/mutual-assistance/comment?id=${enterpriceIdNumber.value}`
			})
		} else if (arr.text == '关注') {
			buttonClick({
				index: 1
			})
		}

	}

	function buttonClick(e) {
		console.log(e)
		saveHxbUserOperation({
				"publishId": enterpriceIdNumber.value,
				"operationType": e.index
			}).catch((error) => {
				console.log(error)
				if (error.data.msg === "'企业徽章条件不满足") {
					uni.showToast({
						title: error.data.msg,
						duration: 2000
					})
				}

			})
			.then((res) => {
				uni.showToast({
					title: "关注成功",
					duration: 2000,
				})
			})
	}

	function goBack() {
		uni.navigateBack()
	}

	function getEnterpriceID(data) {
		switch (data) {
			case "荣耀画像":
				uni.navigateTo({
					url: `/package_honour/pages/honour/portrait?id=${enterpriceIdNumber.value}`,
				});
				break;
			case "企业空间":
				proxy.$unity3dGlobal()
				break;

			default:
				break;
		}
	}
	//无发布信息企业id
	onMounted(() => {


	})
	onLoad((option) => {
		console.log(option);
		enterpriceIdNumber.value = option.id;
		getXhbPublishRequestDetailById(option.id).then((res)=>{
			console.log(res)
				const result = res.data
				requestType.value = result.requestType
				detailTitle.value = result.title
				detailAdress.value = result.location
				detailNumber.value = result.phone
				requirementText.value = result.description
				imageList.value = result.resourceUrlList
				enterpriceName.value = result.xhbPublishPersonInfoVoList ? result
					.xhbPublishPersonInfoVoList[0].publishName : '',
					describeList.value = result.xhbPublishPersonInfoVoList ? result
					.xhbPublishPersonInfoVoList.map((item) => {
						return item.honorName
					}) : [],
					establishTime.value = result.xhbPublishPersonInfoVoList ? result
					.xhbPublishPersonInfoVoList[0].establishTime:'',
				imageUrl.value = result.avatar


		})

	})
</script>

<style scoped lang="less">
	.detail-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		justify-content: space-between;

		.detail-top {
			z-index: 1;
			margin-top: 100rpx;
			top: 322rpx;
			width: 94vw;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			height: 12vh;
			justify-content: space-around;
			background-color: #ffffff;
			border-radius: 33rpx;
			padding-left: 10rpx;
			height: 322rpx;

			.detail-title {
				font-family: "ali-m";
				font-size: 31.3rpx;
			}

			.detail-adress {
				font-size: 24rpx;
				font-family: "ali";
				color: #aaaaaa;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.detail-number {
				font-size: 24rpx;
				font-family: "ali";
				color: #aaaaaa;
			}
		}

		.requirement-details {
			display: flex;
			flex-direction: column;
			height: 422rpx;
			// margin: 20rpx 0;
			// justify-content: space-around;
			background-color: #ffffff;
			padding-left: 30rpx;

			.requirement-title {
				font-size: 31rpx;
				font-family: "ali-m";
				margin-bottom: 20rpx;
				padding-top: 30rpx;
			}

			.requirement-text {
				font-size: 24rpx;
				font-family: "ali";
				color: #aaaaaa;
				margin-bottom: 40rpx;
			}

			.requirement-image {
				width: 195rpx;
				height: 204rpx;
				display: flex;
			}
		}

		.requirement-details-bottom {
			display: flex;
			flex-direction: column;
			padding-left: 30rpx;
			height: 340rpx;
			justify-content: center;
			background-color: #ffffff;

			.requirement-title {
				font-size: 31rpx;
				font-family: "ali-m";
				margin-bottom: 20rpx;
			}
		}

		.jiebang {
			position: sticky;
			bottom: 0;
		}
	}
</style>
